<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>CIT168 Probabilistic Atlas</title>
    <link rel="stylesheet" href="niivue.css" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>
    <header>
      <label for="paqdSelect">Voxel</label>
      <select id="paqdSelect">
        <option>Transparent</option>
        <option selected>Rim</option>
        <option>Opaque</option>
        <option>Translucent</option>
      </select>
      &nbsp;
      <label for="meshSelect">Mesh</label>
      <select id="meshSelect">
        <option selected>Transparent</option>
        <option>Rim</option>
        <option>Outline</option>
        <option>Matcap</option>
      </select>
      &nbsp;
      <button id="clipBtn">Clip</button>
      &nbsp;
      <button id="aboutBtn">About</button>
    </header>
    <main id="canvas-container">
      <div style="display: flex; width: 100%; height: 100%">
        <canvas id="gl1"></canvas>
      </div>
    </main>
    <footer>
      <label id="statusBar">&nbsp; </label>
    </footer>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  paqdSelect.onchange = function () {
    const index = this.selectedIndex
    // 2 default opaque
    let paqdUniforms =[0.3, 0.6, 0.5, 1.0]
    if (index % 4 === 0) //transparent
      paqdUniforms = [0.5, 0.9, 0.0, 0.0]
    if (index % 4 === 1) //rim
      paqdUniforms = [0.5, 0.9, 1.0, 0.2]
    if (index % 4 === 3) //translucent
      paqdUniforms = [0.3, 0.5, 0.25, 0.4]
    nv1.opts.paqdUniforms = paqdUniforms
    nv1.updateGLVolume()
  }
  meshSelect.onchange = function () {
    const index = this.selectedIndex
    nv1.setMeshProperty(0, 'visible', index > 0)
    if (index === 1) {
      nv1.setMeshShader(nv1.meshes[0].id, "Rim")
    } else if (index === 2) {
      nv1.setMeshShader(nv1.meshes[0].id, "Outline")
    } else if (index === 3) {
      nv1.setMeshShader(nv1.meshes[0].id, "Matcap")
    }
  }
  aboutBtn.onclick = function () {
     window.alert("CIT168 Probabilistic atlas of subcortical nuclei PMID: 29664465")
  }
  clipBtn.onclick = function() {
    const depth = nv1.scene.clipPlaneDepthAziElev[0]
    if (depth >= 1.0) {
      nv1.setClipPlane([-0.0, 0, 110])
    } else {
      nv1.setClipPlane([2, 0, 90])
    }
  }
  var volumeList1 = [
    { url: "https://niivue.github.io/niivue-demo-images/CIT168/CIT168toMNI152-2009c_T1w_brain.nii.gz"},
    { url: "https://niivue.github.io/niivue-demo-images/CIT168/CIT168.nii.gz" },
  ]
  const onLocationChange = (data) => {
    statusBar.innerHTML = data.string
  }
  let defaults = {
    show3Dcrosshair: true,
    onLocationChange: onLocationChange,
    backColor: [0.1, 0.1, 0.2, 1],
  }
  var nv1 = new niivue.Niivue(defaults)
  nv1.opts.multiplanarForceRender = true
  nv1.setRenderAzimuthElevation(45, 30)
  await nv1.attachToCanvas(gl1)
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
  await nv1.loadVolumes(volumeList1)
  async function fetchJSON(fnm) {
    const response = await fetch(fnm)
    const js = await response.json()
    return js
  }
  let cmap = await fetchJSON("https://niivue.github.io/niivue-demo-images/CIT168/CIT168.json")
  nv1.volumes[1].setColormapLabel(cmap)
  nv1.opts.yoke3Dto2DZoom = true
  nv1.opts.dragMode = nv1.dragModes.pan
  await nv1.loadMeshes([{ url: "https://niivue.github.io/niivue-demo-images/CIT168/CIT168.mz3" }])
  meshSelect.onchange()
  paqdSelect.onchange()
</script>

